<template>
    <div class="systemmascot" v-show="systemMascot">
        <!-- 提示框 -->
        <div class="systemmascot-tips">
            {{ wifemessage }}
        </div>
        
        <!-- 看板娘画布 -->
        <canvas @click="changeWifeClothes()" id="live2d" width="280" height="250" class="live2d"></canvas>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    const loadlive2d = require('loadlive2d')    
    export default {
        name: 'SystemMascot',
        components: {},
        props: {},
        data() {
            return {

            }
        },
        computed: {
            ...mapState('mascot', ['modelId', 'wifemessage', 'modelIdList']),
            ...mapState('app', ['systemMascot']),
        },
        watch: {
            modelId() {
                this.changeWifeClothes()
            }  
        },
        methods: {
            async changeWifeClothes(modelId = null) {
                const radoModelId = modelId || Math.ceil(Math.random() * 4);
                const activeModelId = this.modelIdList[radoModelId]
                await this.$nextTick()
                loadlive2d("live2d", `/wife/model/index${ activeModelId }.json`);
            },
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            if(!loadlive2d) {
                // this.$warning('live2d 加载失败')
                return
            }
            
            this.changeWifeClothes(this.modelId)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>
@import url('./SystemMascot.scss');
</style>